<%@ page language="java" isELIgnored="false" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>航班查询——恒拓运价魔方</title>
<link rel="stylesheet" href="http://qunarzz.com/home/prd/styles/geilivible/release/home-2013012823365302.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/fare/js/show.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/fare/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/fare/js/datePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/fare/lib/ligerUI/js/ligerui.min.js"></script>
<link href="<%=request.getContextPath() %>/fare/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/FusionCharts/FusionCharts.js"></script>
<link href="<%=request.getContextPath() %>/fare/css/base.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/jsFile/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jsFile/multiblepicker.js"></script>

<link href='<%=request.getContextPath()%>/fare/js/cityquery/cityquery.css' rel="stylesheet" type="text/css" />
<script type='text/javascript' src='<%=request.getContextPath()%>/fare/js/cityquery/citylist.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/fare/js/cityquery/querycity.js'></script>
<link rev="stylesheet" media="all" href="<%=request.getContextPath() %>/fare/css/form_style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerCheckBox.js"></script>
 <script type="text/javascript" src="<%=request.getContextPath()%>/fare/js/json2.js"></script>
 <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/fare/fdc/style.css" />
<!-- 圆角文本框 -->
<link href="<%=request.getContextPath() %>/fare/css/htc/htc.css" rel="stylesheet" type="text/css" />
<jsp:include page="comboxCheckBox.jsp"></jsp:include>
<script type="text/javascript">
$(function(){
	//定义一个全局变量
	window.CHENKED_FLIGHTS=new Array();
	window.CHECKED_STR=" (已选择)";
	
	var obj=window.dialogArguments;//读取来自父窗口的数据
	if(obj){
		CHENKED_FLIGHTS=obj.CHENKED_FLIGHTS;
		$("#fromCityName").val(obj.fromCityName);
		$("#toCityName").val(obj.toCityName);
		flushCheckedFlights();//刷新航班号
	}
});

function changeAir(){
	var carrierKey=$("#airCompany").val();
	if(carrierKey==undefined || carrierKey==""){$("#flightnos option").remove();return ;}
	//获取航空公司的航线下的航班
	var pWin =  window.dialogArguments.pWin;
	var fromCityCode=pWin.document.getElementById("depCityCode").value;
	var toCityCode=pWin.document.getElementById("arrCityCode").value;
	//parent.document.getElementById("loginIn")
	$.ajax({
		url:"<%=request.getContextPath()%>/airCompanyTrendContrastFlightAction!getFlightNo.action",
		data:{
			companyCarrierKey:carrierKey,
			fromCityCode:fromCityCode,
			toCityCode:toCityCode
		},
		type:'post',
		dataType:'json',
		cache : false, 
	    async : false,
	    beforeSend:function(){},
	    success:function(data){
	    	displayFlight(data);
	    },
	    error:function(){},
	    complete:function(){}
	});
}
//显示航班号
function displayFlight(data){
	//清除之前的航班
	$("#flightnos option").remove();
	if(data && data.length>0){
		for(var i=0;i<data.length;i++){
			if(isExistFlight(data[i].flightNo)==true){
				$("#flightnos").append("<option value='"+data[i].flightNo+"'>"+data[i].flightNo+CHECKED_STR+"</option>");
			}else{
				$("#flightnos").append("<option value='"+data[i].flightNo+"'>"+data[i].flightNo+"</option>");
			}
			
		}
	}
}
//是否存在航班号
function isExistFlight(f){
	var str=CHENKED_FLIGHTS.join("|");
	return str.indexOf(f)==-1?false:true;
}

//添加或删除被选择的航班
function addOrRemoveChioce(e){
	var str=CHENKED_FLIGHTS.join("|");
	var op=$(e).find("option:selected");
	if(str.indexOf($(e).val())==-1){//不存在该航班
		CHENKED_FLIGHTS.unshift($(e).val());//放入
		$(op).text($(op).text()+CHECKED_STR);
	}else{//存在
		str=str.replace($(e).val(),"");
		var strs=str.split("|");
		CHENKED_FLIGHTS=[];
		for(var i=0;i<strs.length;i++){
			if(strs[i]!=null && $.trim(strs[i])!="" && strs[i]!="|"){
				CHENKED_FLIGHTS.push(strs[i]);
			}
		};
		$(op).text($(op).text().replace(CHECKED_STR,""));
	}
	flushCheckedFlights();
}
//刷新已经选择的航班
function flushCheckedFlights(){
	
	var table=$("#checked_flights_table");
	$(table).empty();
	var rowSize=5;//一行容纳多少个航班，动态的生成表格
	for(var i=1;i<=CHENKED_FLIGHTS.length;i++){
		if(i%rowSize==1){
			table.append("<tr></tr>");
		}
		$("tr:last",table).append("<td style='padding:5px 5px 5px 0px;border-bottom:0px;'>"
		+"<input type='checkbox' name='checked_flight_checkbox' value='"+CHENKED_FLIGHTS[i-1]+"' checked='checked'  onclick='changeChecked(this)'/>&nbsp&nbsp"+CHENKED_FLIGHTS[i-1]
		+"</td>");
	}
}
//改变选项
function changeChecked(e){
	if($(e).attr("checked")!=true){//不选则删除他，同时需要改变select的显示方式还有全局变量
		var str=CHENKED_FLIGHTS.join("|");
		str=str.replace($(e).val(),"");
		var strs=str.split("|");
		CHENKED_FLIGHTS=[];
		for(var i=0;i<strs.length;i++){
			if(strs[i]!=null && $.trim(strs[i])!="" && strs[i]!="|"){
				CHENKED_FLIGHTS.push(strs[i]);
			}
		};
		flushCheckedFlights();
		$("#flightnos option").each(function(){
			if($(this).val()==$(e).val()){
				$(this).text($(this).val());
				return;
			}
		});
	}
}
//清除所有选项
function clearAll(){
	CHENKED_FLIGHTS=[];
	flushCheckedFlights();
	$("#flightnos option").each(function(){
			$(this).text($(this).val());
	});
}

function sureConfig(){
	if(CHENKED_FLIGHTS.length==0){
		var b=confirm("您没有选择任何航班，是否确认退出？");
		if(b==true){
			closeCheckedWindow();
		}
	}else{
		closeCheckedWindow();
	}
}
//关闭这个窗口
function closeCheckedWindow(){
	var pWin = window.dialogArguments.pWin;//父窗口
	pWin.CHENKED_FLIGHTS=CHENKED_FLIGHTS;
	pWin.showCheckedFlightData();
	window.close();
	
}


</script>
</head>

<body>
	<div class="form_body">
		<div class="main_max">
			<div class="high_10"></div>
			<div class="form_table_tltle">航班选择</div>
			<form method="post" id="lineEditForm"
				action="<%=request.getContextPath()%>/userCareLineAction!saveOrUpdate.action">
				<input type="hidden" name="fromCityName" id="fromCityName" >
				<input type="hidden" name="toCityName" id="toCityName" >
				<input type="hidden" name="saveChange" id="saveChange"/>
				<table width="0" border="0" cellpadding="0" cellspacing="0" class="form_table">
					<tr>
						<td class="left">航空公司: </td>
						<td> 
							<select name="airCompany" id="airCompany" onchange="javascript:changeAir();" style="width:200px;padding:0px;">
							 	    <option value="">-- 请选择 --</option>
  	                           <c:forEach var="item" items="${crawlCompanys}">
							        <option value="${item.carrierKey}">${item.name}</option>
						       </c:forEach>      
                            </select>
                        </td>
					</tr>
					<tr>
						<td class="left">航班:</td>
						<td>
							<select multiple="multiple" id="flightnos" name="flightnos" 
								style="height:200px;width:200px;" ondblclick="addOrRemoveChioce(this)" >
							</select>
							<!--  
							<img style="cursor: pointer;"
								src="<%=request.getContextPath() %>/fare/images/but_03.png"
								name="querybutton" id="querybutton" onclick="addChioce()"/>
							-->
							双击即可选中或者删除
						</td>
					</tr>	
					<tr>
					 	<td class="left">
							已选择航班:
						</td>
						<td>
							<!--  
							<input type="text" id="chiocevalue222" name="chiocevalue222" value="" style="width:350px;" readonly="readonly"/>
							-->
							<table id="checked_flights_table"></table>

						</td>
					 </tr>
					 <tr>
						<td class="right" colspan="2" style="padding-top:10px;padding-left:150px;">
							<img
							src="<%=request.getContextPath() %>/fare/images/button/but_13.png"
							name="querybutton" id="querybutton" onclick="javascript:sureConfig();" />
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<img
							src="<%=request.getContextPath() %>/fare/fdc/images/but_02.png"
							name="cancelbutton" id="cancelbutton"
							onclick="javascript:clearAll();" />
						</td>
					 </tr>
		</table>
	</form>	
</body>
</html>
